<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>erp进销存系统</title>
	<link rel="stylesheet" href="../../static/css/style.css" th:href="@{http://localhost:8080/css/style.css}">
	<link rel="stylesheet" href="../../static/css/man/manager_list.css"
		  th:href="@{http://localhost:8080/css/man/manager_list.css}">
	<link rel="stylesheet" href="../../static/layui/css/layui.css"
		  th:href="@{http://localhost:8080/layui/css/layui.css}">
	<script src="../../static/layui/layui.js" th:src="@{http://localhost:8080/layui/layui.js}"></script>
	<script src="../../static/js/jquery.js"
			th:src="@{http://localhost:8080/webjars/jquery/3.6.0/jquery.min.js}"></script>
	<script src="../../static/js/man/manager.js" th:src="@{http://localhost:8080/js/man/manager.js}"></script>

	<style>
        .layui-table-page {
            text-align: center;
        }
	</style>
</head>
<body>
<h1>用户列表</h1>

<table id="man" class="layui-table" lay-data="{height:330,id:'man'}" lay-filter="demo">

</table>

<script type="text/html" id="bar">
	<a style="width:60px;" class=" layui-btn-danger layui-btn-xs layui-btn layui-btn-normal layui-btn-radius"
	   lay-event="del" >删除</a>
</script>

<script type="text/html" id="manager_bar">
	<div class="layui-input-block">
		<input type="checkbox" name="role" lay-skin="switch">
	</div>
</script>

<script>
	layui.use('table', function () {
		var table = layui.table;
		//第一个实例
		table.render({
			elem: '#man',
			url: '/manager/manList/', //数据接口
			page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
				layout: ['prev', 'page', 'next', 'count', 'skip'] //自定义分页布局
				//,curr: 5 //设定初始在第 5 页
				, groups: 5 //只显示 1 个连续页码
				, limit: 10

			},
			cols: [
				[//表头
					{field: 'id', title: 'ID', sort: true, fixed: 'left'}
					, {field: 'realName', title: '用户真实姓名',edit: 'text'}
					, {field: 'userName', title: '用户名',edit: 'text'}
					, {field: 'password', title: '用户密码',edit: 'text'}
					, {field: 'telephone', title: '用户手机号',edit: 'text'}
					// , {field: 'role', title: '超级管理员', sort: true}
					, {title: '操作', toolbar: '#bar' , align:'center'}
				]
			],
		});

		//监听单元格编辑
		table.on('edit(demo)', function (obj) {
			var value = obj.value //得到修改后的值
				, data = obj.data //得到所在行所有键值
				, field = obj.field; //得到字段
			// layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
			$.ajax({
				url:"/manager/update",
				method: "get",
				data:"keyStr="+field+"&valueStr="+value+"&id="+data.id,
				success:function (da){
					layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value+ " =====  "+ da);
				}
			})

		});

		//监听工具条
		table.on('tool(demo)', function (obj) {
			var data = obj.data;
			if (obj.event === 'del') {
				layer.confirm('请确认删除当前用户.', function (index) {
					console.log(obj.data.id);
					obj.del();
					layer.close(index);
					//后台删除并响应结果
					$.ajax({
						url: "/manager/del",
						method: "post",
						data: "index=" + obj.data.id,
						success: function (data) {
							//弹出删除成功提示
							if (data == "success") {
								layui.use('layer', function () {
									var layer = layui.layer;
									layer.msg('用户删除成功', {
										icon: 1,
										time: 1000,
										anim: 5
									});
								});
							}
						}
					})
				});
			} else if (obj.event === 'edit') {
				layer.alert('编辑行：<br>' + JSON.stringify(data))
			}
		});

		var $ = layui.$;

		$('.demoTable .layui-btn').on('click', function () {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});


	});
</script>


</body>
</html>

